<template>
  <div class="cbox">
    <a-tabs v-model:activeKey="state.activeKey">
      <a-tab-pane :key="tab.value" :tab="tab.label" v-for="tab in state.tabs">
      </a-tab-pane>
      <template #rightExtra>
        <a-button type="primary" @click="getAir2Power"
          >压缩空气气电转换</a-button
        >
      </template>
    </a-tabs>
    <div class="summary">
      <div class="info">
        <table>
          <tr>
            <template v-for="(col, i) in state.summary" :key="i">
              <th>{{ col.label }}</th>
              <td>{{ col.value?.toFixed(4) }}</td>
            </template>
          </tr>
        </table>
      </div>
      <a-button
        v-if="!['3-0', '3-1'].includes(state.activeKey)"
        @click="link"
        type="primary"
        >详情</a-button
      >
    </div>
    <a-table
      v-if="state.data?.rows"
      :data-source="planList(state.data.rows)"
      :columns="state.columns"
      stripe
      bordered
    >
    </a-table>
  </div>
  <a-modal
    v-model:visible="state.air2Power"
    title="压缩空气气电转换"
    :width="900"
    :footer="null"
    :centered="true"
  >
    <a-table
      size="middle"
      :data-source="planList(state.air2Power.rows)"
      :columns="airToPowerColumns"
      stripe
      bordered
    >
    </a-table>
  </a-modal>
</template>
<script setup>
import { getCurrentInstance, reactive, ref, watch, onMounted } from "vue";
import { works, workColumns, airToPowerColumns } from "@/utils/workflow";
import _ from "lodash";
import { planList } from "@/utils/planList";
const { proxy } = getCurrentInstance();

const props = defineProps(["childLabel"]);
const state = reactive({
  tabs: [],
  activeKey: null,
  columns: [],
  data: null,
  summary: [],
  air2Power: null,
});
const emits = defineEmits(["onInfo"]);

watch(
  () => props.childLabel,
  (workLabel) => {
    // 获取工序的信息
    const one = _.find(works, { label: workLabel });
    if (one.children) {
      state.tabs = one.children;
    } else {
      state.tabs = [one];
    }
    state.activeKey = state.tabs[0].value;
  },
  { immediate: true }
);

// 二级界面API集合
const apis = {
  0: "/calibration/stat/ship_cut/second",
  1: "/calibration/stat/ship_old/second",
  2: "/calibration/stat/ship_weld/second",
  "3-0": "/calibration/stat/machine_pipe/second?type=法兰",
  "3-1": "/calibration/stat/machine_pipe/second?type=弯头",
  "4-0": "/calibration/stat/paint_house/second",
  "4-1": "/calibration/stat/paint_ship/second",
  "5-0": "/calibration/stat/sand_house/second",
  "5-1": "/calibration/stat/sand_ship/second",
  "6-0": "/calibration/stat/water_clean_point/second",
  "6-1": "/calibration/stat/water_clean/second",
  "6-2": "/calibration/stat/water_clean_rust/second",
  "6-3": "/calibration/stat/water_clean_rust_ship/second",
};

// 根据工序在二级界面摘取显示字段
const pickColumns = (work, columns) => {
  let pickArray = [];
  if (work === "0") {
    pickArray = [
      "cutArea",
      "length",
      "width",
      "startPower",
      "endPower",
      "startO2",
      "endO2",
      "startAir",
      "endAir",
    ];
  } else if (work === "1") {
    pickArray = ["date", "cutNum", "startGas", "endGas", "startO2", "endO2"];
  } else if (work === "2") {
    pickArray = [
      "startTime",
      "endTime",
      "machineNum",
      "startCO2",
      "endCO2",
      "startO2",
      "endO2",
    ];
  } else if (work === "4-0") {
    pickArray = ["project", "startAir", "endAir", "startGas", "endGas"];
  } else if (work === "4-1") {
    pickArray = ["startTime", "endTime", "startAir", "endAir"];
  } else if (work === "5-0") {
    pickArray = ["startAir", "endAir"];
  } else if (work === "5-1") {
    pickArray = [
      "startTime",
      "endTime",
      "startAir",
      "endAir",
      "airByOne",
      "num",
    ];
  }
  return _.filter(columns, (o) => !pickArray.includes(o.key));
};

watch(
  () => state.activeKey,
  (v) => {
    if (v) {
      // 根据工序获取表单项和数据
      const columns = workColumns[v];
      const _columns = pickColumns(v, columns);
      state.columns = _.map(_columns, (o) => ({ ...o, ellipsis: true }));

      proxy.$axios.get(apis[v]).then(({ success, data }) => {
        if (success) {
          state.data = data;

          const stat = data.stat;
          if (v === "0") {
            //船体下料
            state.summary = [
              { label: "单位能耗", value: stat.powerUnit },
              { label: "单位耗氧", value: stat.o2Unit },
              { label: "单位耗气", value: stat.airUnit },
              { label: "单位压缩空气量耗电量标定值", value: stat.unitAirPower },
              {
                label: "单位耗电能标定值(压缩空气转化)",
                value: stat.powerAirUnit,
              },
            ];
          } else if (v === "1") {
            // 船体割旧
            state.summary = [
              { label: "单位耗天然气量标定值", value: stat.gasByUnit },
              { label: "单位耗氧气量标定值", value: stat.o2ByUnit },
            ];
          } else if (v === "2") {
            // 船体焊接
            state.summary = [
              { label: "单位耗电量标定值", value: stat.powerByUnit },
              { label: "单位耗CO2量标定值", value: stat.co2ByUnit },
            ];
          } else if (v === "3-0") {
            // 法兰管子焊接
            state.summary = [
              {
                label: "法兰氩弧焊接单位用电量标定值",
                value: stat.falanYahuPowerByUnit,
              },
              {
                label: "法兰CO2焊接单位用电量标定值",
                value: stat.falanCo2PowerByUnit,
              },
              {
                label: "法兰管子焊接单位用电量标定值",
                value: stat.falanPowerByUnit,
              },
            ];
          } else if (v === "3-1") {
            // 弯头管子焊接
            state.summary = [
              {
                label: "弯头管子焊接单位用电量标定值",
                value: stat.wantouYahuPowerByUnit,
              },
            ];
          } else if (v === "4-0") {
            // 喷漆房分段喷漆
            state.summary = [
              {
                label: "单位耗电标定值",
                value: stat.paintHousePowerByUnit,
              },
              {
                label: "单位用压缩空气量标定值",
                value: stat.paintHouseAirByUnit,
              },
              {
                label: "单位用天然气量标定值",
                value: stat.paintHouseGasByUnit,
              },
              {
                label: "单位压缩空气量耗电量标定值",
                value: stat.unitAirPower,
              },
              {
                label: "单位耗电能标定值",
                value: stat.paintHouseAirPowerByUnit,
              },
            ];
          } else if (v === "4-1") {
            // 舱室及船壳喷漆
            state.summary = [
              {
                label: "单位用压缩空气量标定值",
                value: stat.paintShipAirByUnit,
              },
              {
                label: "单位压缩空气量耗电量标定值",
                value: stat.unitAirPower,
              },
              {
                label: "单位耗电能标定值(压缩空气转化)",
                value: stat.paintShipAirPowerByUnit,
              },
            ];
          } else if (v === "5-0") {
            // 打砂房分段打砂
            state.summary = [
              {
                label: "单位耗电量标定值",
                value: stat.houseSandPowerByUnit,
              },
              {
                label: "单位用压缩空气量标定值",
                value: stat.houseSandAirByUnit,
              },
            ];
          } else if (v === "5-1") {
            // 舱室打砂
            state.summary = [
              {
                label: "单位用压缩空气量标定值",
                value: stat.shipSandAirByUnit,
              },
              {
                label: "单位压缩空气量耗电量标定值",
                value: stat.unitAirPower,
              },
              {
                label: "单位耗电能标定值(压缩空气转化)",
                value: stat.shipSandAirPowerByUnit,
              },
            ];
          } else if (v === "6-0") {
            state.summary = [
              {
                label: "超水清洁点打单位耗电标定值",
                value: stat.waterPointPowerByUnit,
              },
            ];
          } else if (v === "6-1") {
            state.summary = [
              {
                label: "超水清洁单位耗电标定值",
                value: stat.waterPowerByUnit,
              },
            ];
          } else if (v === "6-2") {
            state.summary = [
              {
                label: "超水除锈单位耗电标定值",
                value: stat.waterRustPowerByUnit,
              },
            ];
          } else if (v === "6-3") {
            state.summary = [
              {
                label: "舱盖超水除锈单位耗电标定值",
                value: stat.waterRustShipPowerByUnit,
              },
            ];
          }
        } else {
          state.data = null;
        }
      });
    }
  },
  { immediate: true }
);

const link = () => {
  const tab = _.find(state.tabs, { value: state.activeKey });
  emits("onInfo", tab?.label);
};

const getAir2Power = () => {
  proxy.$axios
    .get("/calibration/stat/unit_air_power")
    .then(({ success, data }) => {
      if (success) {
        state.air2Power = data;
      } else {
        state.air2Power = null;
      }
    });
};
</script>
<style lang="less" scoped>
.cbox {
  width: 100%;
  height: 100%;
  background: #262626;
  padding: 2px;

  .summary {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info {
      width: calc(100% - 80px);

      table {
        width: 100%;
        margin: 4px;
        color: #fff;

        th,
        td {
          border: 1px solid #000;
          text-align: center;
          padding: 4px;
          font-size: 12px;
          min-width: 50px;
        }

        th {
          background-color: #000;
        }

        td {
          color: red;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
